<template lang="pug">
    div(class="forum-home")
        div(class="topheader")
            ly-tab(v-model="selectedId", :items="partitions", ref="ly")
        div(class="forum-home-index_posts")
            tabs(:tabs="items", @change="tabChange", ref="tab", :scrollable="scrollable")
                div(v-for="(item,index) in items")
                  post-flow(:partition-id="item.id", 
                            :load-data-when-mounted="false", 
                            paged-panel-height="calc(100vh - 45px - 45px)"
                            :ref="`ref${index}`")
</template>

<script>
import Tabs from "vue-slide-tabs";
import PostFlow from "./PostFlow";
import LyTab from "ly-tab";
Vue.use(LyTab);

import axios from "@/plugins/axios";
import scrollableStore from "@/store/ScrollableStore";

export default {
  data() {
    return {
      items: [{ id: null }],
      partitions: [{ label: "首页" }],
      selectedId: 0
    };
  },
  components: {
    "post-flow": PostFlow,
    tabs: Tabs
  },
  computed: {
    scrollable() {
      return scrollableStore.state.scrollable;
    }
  },
  watch: {
    /**tab切换 */
    selectedId(val) {
      this.$refs.tab.select(val);
    }
  },
  methods: {
    tabSliderChange(panel, index) {
      this.selectedId = index;
    },
    getPartitions() {
      const options = { url: "forum/home/partitions", method: "post" };
      axios(options)
        .then(this.getPartitionsSuccess)
        .catch(() => {});
    },
    getPartitionsSuccess(partitions) {
      let tmp = partitions.map(partition => {
        return { label: partition.name, id: partition.value };
      });
      this.partitions = [{ label: "首页" }].concat(tmp);

      this.items = this.partitions.map(p => {
        return { id: p.id };
      });

      this.$nextTick(() => {
        if (this.$refs.ly.reCal) this.$refs.ly.reCal(); // 重新计算
      });
    },
    tabChange(index) {
      this.selectedId = index;
      const refName = `ref${index}`; // ref + index
      const ref = this.$refs[refName].length
        ? this.$refs[refName][0]
        : this.$refs[refName];
      ref.init(); // 手动调用初始
    }
  },
  created() {
    this.getPartitions();
  },
  mounted() {
    this.tabChange(0); // 手动调用查询第一个tab页
  }
};
</script>

<style lang="less">
@import "../../common/common.less";

.forum-home {
  min-height: 100%;
  background-color: @page_background;
  display: flex;
  flex-direction: column;

  @topheader_height: 45px;
  .topheader {
    height: @topheader_height;
    width: 100%;
    z-index: 2;
    border-bottom: 2px solid #e9e9e9;
  }

  &-index_posts {
    height: calc(100vh - @topheader_height - @navigate_bottom_height);
    overflow: scroll;
  }

  &__tabs {
    .tabs-titles {
      visibility: hidden;
    }
  }

  .tab-slider {
    height: calc(100vh - 45px - 44px);
  }

  &__item {
    background-color: #f0f0f0;
  }
}
</style>
